<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>《记忆中的你》</title>
  <style>
    body,
    html {
      width: 100%;
      height: 100%;
      margin: 0;
    }
    .box {
      width: 100%;
      height: 100%;
      perspective: 2000px;
      background: #333;
      overflow: hidden;
    }
    /* 全屏容器 */
    .wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      z-index: 998;
    }

    /* 四张照片 */
    .wrapper>div {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: no-repeat center / cover;
    }

    .wrapper>div.front {
      background-image: url(./images/01.jpg);
    }

    .wrapper>div.right {
      background-image: url(./images/02.jpg);
    }

    .wrapper>div.back {
      background-image: url(./images/03.jpg);
    }

    .wrapper>div.left {
      background-image: url(./images/04.jpg);
    }
    .wrapper>div h1, .wrapper>div h4{
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      position: absolute;
    }
    .wrapper>div h4{
      font-size: 20px;
      right: 10%;
      bottom: 150px;
    }
    .wrapper>div h1{
      font-size: 40px;
      right: 8%;
      bottom: 100px;
    }
    /* 切换按钮 */
    .btn {
      width: 150px;
      height: 60px;
      position: absolute;
      left: 50%;
      bottom: 60px;
      transform: translate(-50%);
      display: flex;
      justify-content: space-between;
      z-index: 999;
    }

    .btn a {
      text-decoration: none;
      color: #fff;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #780116;
      text-align: center;
      line-height: 60px;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="wrapper">
      <div class="front">
        <h4>2017-2018</h4>
        <h1>Your home</h1>
      </div>
      <div class="right">
        <h4>2019-2020</h4>
        <h1>Sandy beach</h1>
      </div>
      <div class="back">
        <h4>2015-2016</h4>
        <h1>Long chair</h1>
      </div>
      <div class="left">
        <h4>2016-2017</h4>
        <h1>Fitness girl</h1>
      </div>
    </div>
  </div>
  <div class="btn">
    <a class="prev" href="javascript:;">←</a>
    <a class="next" href="javascript:;">→</a>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    window.onload = function () {
      var $wrapper = $('.wrapper')
      // 初始化3D图形
      var width = $(window).width()
      $wrapper.css({ 'transform-origin': 'center center -' + width / 2 + 'px' })
      $('.front').css('transform', 'translateX(0) translateZ(0) rotateY(0deg)')
      $('.right').css('transform', 'translateX(' + width / 2 + 'px) translateZ(-' + width / 2 + 'px) rotateY(-270deg)')
      $('.back').css('transform', 'translateX(0) translateZ(-' + width + 'px) rotateY(-180deg)')
      $('.left').css('transform', 'translateX(-' + width / 2 + 'px) translateZ(-' + width / 2 + 'px) rotateY(-90deg)')
      // 设置过渡&点击旋转
      setTimeout(function () {
        $wrapper.css({ 'transition': 'all 3s cubic-bezier(1, 0, 0, 1)' })
        var index = 0
        $('.btn').on('click', 'a', function () {
          if ($(this).hasClass('prev')) index--
          if ($(this).hasClass('next')) index++
          $wrapper.children().animate({ width: '80%', height: '80%', left: '10%', top: '10%' }, function () {
            $wrapper.css('transform', 'rotateY(' + index * 90 + 'deg)')
          })
        })
        $wrapper.on('transitionend webkitTransitionEnd', function () {
          $wrapper.children().animate({ width: '100%', height: '100%', left: '0', top: '0' })
        })
      })
    }
  </script>
</body>

</html>